<template>
<div>
    <page-header-wrapper></page-header-wrapper>
    <a-card style="margin-top: 20px">
        <div class="table-page-search-wrapper">
            <a-form :form="searchForm" layout="inline">
                <a-row :gutter="48">
                    <SearchFormItems  :md="{span:8}" :sm="{span:24}" :searchKeys="OrderDownloadSearchKeys" :advanceVal="advanced" >
                    </SearchFormItems>
                    <a-col :md="(!advanced && 8) || 6" :sm="6" class="advanced_butns">
                        <span class="table-page-search-submitButtons" :style="
                            (advanced && { float: 'right', overflow: 'hidden' }) || {}
                        ">
                            <a-button @click="reset">重置</a-button>
                            <a-button type="primary" @click="search">查询</a-button>
                        </span>
                    </a-col>
                </a-row>
            </a-form>
        </div>
    </a-card>
    <div class="cont_box">
        <div class="table_header flex-between">
            <div class="table_name">{{pageTitle}}</div>
            <div class="table_butns flex-end">
                <a-button size="default" type="primary" :disabled="!selectedRowKeys.length" @click="batchCopy">
                    批量复制链接
                </a-button>
            </div>
        </div>
        <a-table :columns="OrderDownloadColumn" :dataSource="dataSource" :pagination="pagination" :rowKey="(it) => it.id " :rowSelection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange
        }" :loading="loading" binvested>
            <div class="flex-center" slot="url" slot-scope="record,text,index">
                <span>{{ record.url}}</span>
                <a-icon :type="record?.iscopy ?'check':'copy'" style="color:#1890ff;" @click="copyUrl(record.url, 'iscopy', index)" />
            </div>
        </a-table>
        <pagination :total="total" :page.sync="page" :size.sync="size" :onPageSizeChange="onPageSizeChange" :onShowSizeChange="onShowSizeChange"/>
    </div>
</div>
</template>

<script>
import {
    OrderDownloadSearchKeys,
    OrderDownloadColumn
} from './config'
import {
    downLoadList,
    picCancel,
} from '@/api/order'

export default {
    name: 'OrderDownload',
    data() {
        return {
            pageTitle:'',
            OrderDownloadSearchKeys,
            OrderDownloadColumn,
            advanced: false,
            dataSource: [],
            pagination: false,
            page: 1,
            size: 50,
            total: 0,
            loading: false,
            selectedRowKeys: [],
            selectedRows: [],
            searchForm:this.$form.createForm(this, { name:'order_download_search' }),
        }
    },
    created() {
        this.pageTitle = this.$route?.meta?.title
        this.getList();
    },
    methods: {
        copyUrl(value, key, dataIndex){
            let _ = this
            this.$copyText(value).then(function (e) {
                console.log(e)
                const dataSource = [..._.dataSource];
                const target = dataSource[dataIndex]
                if (target) {
                    target[key] = true;
                    _.dataSource = dataSource;
                    setTimeout(()=>{
                        target[key] = false;
                        _.dataSource = dataSource;
                    },3000)
                }
            }, function (e) {
                _.$$message.error('复制失败')
                console.log(e)
            })
        },
        batchCopy(){
            let _ = this, temArr = this.selectedRows.map((i) => {return i.url }),resStr ='';
            resStr = temArr.join(',')
            this.$copyText(resStr).then(function (e) {
                _.$message.success('批量复制成功')
            }, function (e) {
                _.$$message.error('复制失败')
            })
        },
        search() {
            this.page = 1;
            this.getList();
        },
        reset() {
            this.searchForm.resetFields();
            this.page = 1;
            this.getList();
        },
        onPageSizeChange(page, size) {
            this.selectedRowKeys = []
            this.page = page;
            this.getList(page, size);
        },
        onShowSizeChange(page, size) {
            this.selectedRowKeys = []
            this.page = page;
            this.size = size
            this.getList(page, size);
        },
        // 获取列表
        async getList(currentPage, currentSize) {
            this.loading = true
            const { page, size } = this;
            let queryParam = this.searchForm.getFieldsValue(),orderNos = []
            if(queryParam && queryParam.orderNos){
                if(queryParam.orderNos.indexOf('\n')>-1){
                    orderNos = queryParam.orderNos.split('\n')
                }else{
                    orderNos.push(queryParam.orderNos)
                }
            }
            this.searchForm.validateFields(async (err, values) => {
                if (!err) {
                    let params = {
                        pageNum: (currentPage) || (page),
                        pageSize: currentSize || size,
                        ...values,
                        orderNos,
                    };
                    const res = await downLoadList(params)
                    this.total = res?.data?.total || 0;
                    this.dataSource = res?.data?.list || []
                    this.loading = false
                } else{
                    this.loading = false
                }
            })
        },
        onSelectChange(selectedRowKeys, selectedRows) {
            this.selectedRowKeys = selectedRowKeys;
            this.selectedRows = selectedRows;
        },
    },
};
</script>
